<!--
 * 标签
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-tabs-item" :class="classes" :style="styles" @tap="handleClick" :hover-class="hoverClass || globalHoverClass">
        <!-- 对于开启 mergeVirtualHostAttributes 的项目,如果将 id 设置在最外层,获取不到节点信息 -->
        <view class="pure-tabs-item-content" :id="id">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: ["onClick"],
        inject: {
            // 全局hover-class
            globalHoverClass: {
                from: "globalHoverClass",
                default: () => {
                    return null;
                },
            },
            // 全局禁用样式
            globalDisabledClass: {
                from: "globalDisabledClass",
                default: () => {
                    return null;
                },
            },
            // 选中值
            activatedValue: {
                from: "activatedValue",
                default: undefined,
            },

            // 添加此项
            addItem: {
                from: "addItem",
                default: () => {
                    return () => {};
                },
            },
            // 更新此项
            updateItem: {
                from: "updateItem",
                default: () => {
                    return () => {};
                },
            },
            // 移除此项
            removeItem: {
                from: "removeItem",
                default: () => {
                    return () => {};
                },
            },
            // 提交 Tab 的点击事件
            emitTabClickFn: {
                from: "emitTabClickFn",
                default: () => {
                    return () => {};
                },
            },
        },
        data() {
            return {
                id: "", // ID
                debug: false,
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 激活了
                if (this.activatedValue === this.value) classes.push(`pure-tabs-item-activated`);

                // 禁用了
                if (this.disabled && this.disabledClass) classes.push(this.disabledClass);
                else if (this.disabled && this.globalDisabledClass) classes.push(this.disabledClass);

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },
        },
        watch: {
            // 数据变化后
            item: {
                async handler() {
                    // 更新
                    this.updateItem(this.id, {
                        id: this.id,
                        value: this.value,
                        getRect: this.getRect,
                    });
                },
                deep: true,
            },

            // 绑定值（唯一标识）变化后
            value: {
                async handler(newValue) {
                    // 更新
                    this.updateItem(this.id, {
                        id: this.id,
                        value: newValue,
                        getRect: this.getRect,
                    });
                },
            },
        },
        async created() {
            // 初始化ID
            this.initID();

            // 添加此项
            this.addItem?.(this.id, {
                id: this.id,
                value: this.value,
                getRect: this.getRect,
            });
        },
        beforeUnmount() {
            // 移除此项
            this.removeItem(this.id);
        },
        methods: {
            // 初始化ID
            initID() {
                this.id = `PureTabsItem_${Date.now()}_${this.randomString()}`;
            },

            // 点击事件
            handleClick() {
                // 提交 Tab 的点击事件
                this.$emit("onClick", this.item);

                // 提交父组件的点击事件
                this.emitTabClickFn(this.item);
            },

            // 获取节点信息
            getRect() {
                return new Promise(async (resolve) => {
                    uni.createSelectorQuery()
                        .in(this)
                        .select(`#${this.id}`)
                        .boundingClientRect((rect) => {
                            resolve(rect);
                        })
                        .exec();
                });
            },

            // 生成一个36位的随机字符串
            randomString() {
                return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
            },

            // Sleep
            sleep(time = 10) {
                return new Promise((resolve) => {
                    let timer = setTimeout(() => {
                        clearTimeout(timer);
                        resolve();
                    }, time);
                });
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
